<template>
    <div class="slide-goods">
        <slider :itemWidth=90 :gapWidth=20 ref="goods-slider" :preventDefault="false">
            <div v-for="(item, index, key) in goodsList"
                 :key="key"
                 @click="toDetail(item)"
                 class="slide-good-single"
            >
                <img :src="item.pic" @load="refreshSilider(goodsList.length, 'goods-slider')" v-lazy="item.pic"/>
                <div class="good-name">{{item.name}}</div>
                <div class="good-price">
                    <span>{{item.price | moneyFmt(2, '￥')}}</span>
                    <del>{{item.money | moneyFmt(2, '￥')}}</del>
                </div>
            </div>
        </slider>

    </div>
</template>

<script>
    import Slider from "../common/slider";
    import {commonMixin} from '@/common/mixin';
    export default {
        mixins: [commonMixin],
        components: {Slider},
        name: "slide-goods",
        props: {
            goodsList: {
                type: Array
            },
        },
        methods:{
            toDetail(good) {
                this.$emit('toDetail', good)
            }
        }
    }
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
    @import '~@/assets/main.styl'
    .slide-goods{
        height 100%
    }
    .slide-good-single{
        width vw(90)
        img{
            width vw(90)
            height vw(90)
        }
    }
    .good-name{
        margin-top smallMargin
        word-vw(word12, gray3)
        line-height vw(16)
        text-align left
        ellipsis()
    }
    .good-price{
        margin-top titleMargin
        word-vw(word12, main-color)
        line-height vw(16)
        text-align left
        overflow hidden
        del{
            font-size vw(10)
            color gray9
            line-height vw(14)
            margin-left smallMargin
        }
    }
</style>
